import React, { memo } from "react";
import style from "./index.module.scss";
import { useNavigate } from "react-router";
const Index: React.FC = memo(() => {
  const navigate = useNavigate();
  return (
    <div>
      <div className={style.shou}>
        <div className={style.yue}>
          <span>首月特惠</span>
        </div>
        <div className={style.top1}>
          <div className={style.zuo1}>
            <span>连续包月</span>
            <p>
              ￥<span style={{ fontSize: "25px" }}>13.9</span>{" "}
              <s style={{ color: "#ccc" }}>￥100</s>
            </p>
          </div>
          <div className={style.you1}>
            <span className="vip" style={{ color: "#fcd686" }}>
              VIP
            </span>
            <button
              className="li"
              style={{
                background: "#434144",
                width: "100px",
                height: "30px",
                borderRadius: "10px",
              }}
            >
              <span style={{ color: "#fcd686" }}>立即开通</span>
            </button>
          </div>
        </div>
        <div className={style.xia}>
          <span>
            有效期31天,到期按￥26.9/月自动续费,可随时在个人中心-设置中取消会员自动扣款
          </span>
        </div>
      </div>
      <div style={{ marginLeft: "25px", marginTop: "5px" }}>
        <span>
          开通前请阅读{" "}
          <span onClick={() => navigate("/xieyi")} style={{ color: "#6cc9fc" }}>
            《连续订阅服务协议》
          </span>
        </span>
      </div>
    </div>
  );
});

export default Index;
